<template>
  <div>
    <base-search
      :title="t('keys.messageSettings')"
      :isShowSearch="1"
      v-permission="['home.newPersonalSettings.messageSettings.see']"
    ></base-search>
    <div class="wrap">
      <div class="contract_base_title ">{{ getUserInfo().tenantName || '--' }}</div>
      <div class="wrap_cont" v-loading="loading">
        <div class="wrap_item" v-for="(item, index) in defaultlist" :key="index">
          <div class="wrap_item_title">{{ item.title }}</div>
          <div class="wrap_item_title_isOr">{{ item.desc }}</div>
          <el-radio-group
            v-model="messageObj[item.key]"
            class="ml-4"
            @change="
              (val) => {
                radioChange(val, item)
              }
            "
          >
            <el-radio :label="it.value" v-for="(it, idx) in item.Option">{{ it.label }}</el-radio>
          </el-radio-group>
        </div>
      </div>
    </div> 
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ERR_OK } from 'config/statusCode'
import { useI18n } from 'vue-i18n'
import { ElMessage } from 'element-plus'
import { getMessageSendReceiveApi,setMessageSendReceiveApi } from 'api/home'
import { getUserInfo } from 'utils/headerToken'

const { t } = useI18n() // 中英文
const loading = ref(false)

const messageObj = ref({
  noteMessageFlag: true,
  webMessageFlag: true,
  emailMessageFlag: true,
  tenantId: ''
})
// 渲染UIlist
const defaultlist = ref([
  {
    title: t('keys.sms_set'),
    type: 'SMS',
    desc: t('keys.mess_or_ok'),
    key: 'noteMessageFlag',
    Option: [
      { value: true, label: t('keys.yes') },
      { value: false, label: t('keys.no')  }
    ]
  },
  {
    title: t('keys.web_msg_set'),
    type: 'WEB_MSG',
    desc: t('keys.mess_or_ok'),
    key: 'webMessageFlag',
    Option: [
      { value: true, label: t('keys.yes') },
      { value: false, label: t('keys.no')  }
    ]
  },
  {
    title: t('keys.email_set'),
    type: 'EMAIL',
    desc: t('keys.mess_or_ok'),
    key: 'emailMessageFlag',
    Option: [
      { value: true, label: t('keys.yes') },
      { value: false, label: t('keys.no')  }
    ]
  }
]) 
// 单选切换
const radioChange = async () => {
  const { code, data } = await setMessageSendReceiveApi(messageObj.value)
  if (code === ERR_OK) {
    getMessageSendReceive()
    ElMessage({
      type: 'success',
      message: t('keys.operation_succeeded')
    })
  }
}

// 获取 radio 配置
const getMessageSendReceive = async () => {
  loading.value = true
  const { code, data } = await getMessageSendReceiveApi({ tenantId: getUserInfo().tenantId })
  if (code === ERR_OK) {
    data && data.length > 0 ? (messageObj.value = data[0] || {}) : ''
  }
  loading.value = false
}
onMounted(() => {
  messageObj.value.tenantId = getUserInfo().tenantId 
  getMessageSendReceive()
})
</script>
<style lang="scss" scoped>
.wrap {
  width: 100%;
  .wrap_company {
  min-width: 160px;
  display: inline-block;
} 
  .wrap_cont {
    width: 100%;
    margin-left: 4px;
    .wrap_item {
      width: 100%;
      margin-top: 20px;
      .wrap_item_title {
        font-size: 14px;
        font-weight: 550;
        color: #1d2129;
        margin-bottom: 12px;
      }
      .wrap_item_title_isOr {
        font-size: 14px;
        font-weight: 400;
        color: #4e5969;
      }
    }
  }
}

</style>
